<!-- 执法类评价 -->
<template>
  <div class="service-evaluation">
    <div class="tip">{{ currentData.tip }}</div>
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      class="demo-ruleForm"
    >
      <el-form-item label="您的联系电话" prop="phone_number">
        <el-input v-model="formData.phone_number" />
      </el-form-item>
      <el-form-item :label="currentData.field" prop="result">
        <el-radio-group v-model="formData.result">
          <el-radio :label="1">满意</el-radio>
          <el-radio :label="0">不满意</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm(ruleFormRef)"
          class="submit-button"
        >
          提交
        </el-button>
      </el-form-item>
    </el-form>
    <dialogCommon v-if="dialogVisible"></dialogCommon>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
import dialogCommon from "../../components/dialogCommon.vue";
import { useRouter, useRoute } from "vue-router";

import ManageAPI from "@/api/manage";
import { useManageStore } from "@/stores";
const manageStore = useManageStore();
const route = useRoute();
const router = useRouter();

// 获取当前页面数据
const currentData = ref({});
watch(
  () => router.currentRoute.value,
  (newVal) => {
    const name = newVal.path.slice(1);
    currentData.value = GLOBAL_DICT.find((item) => item.name === name);
  },
  { immediate: true }
);
// 提交完成弹框
const dialogVisible = ref(false);

const ruleFormRef = ref();
const formData = reactive({
  browser: manageStore.userAgent,
  phone_number: "",
  result: "",
});
const rules = {
  browser: [{ required: true }],
  phone_number: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' }
  ],
  result: [{ required: true, message: "请评价", trigger: "blur" }],
};

// 提交
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log(formData, "submit!");
      const type_ =
        GLOBAL_DICT.findIndex((item) => item.name === currentData.value.name) +
        1;
      let payload = {
        type_, //必传。评价类型：1-服务质量评价 2-执法过程评价 3-投诉处置评价 4-综合问卷
        // user_type: "1", //用户身份：1-服务对象 2-周边群众 3-其他 type_为4时必传
        // user_type_value: "服务对象", //用户身份说明 type_为4时必传
      };
      Object.assign(payload, formData);
      ManageAPI.submitEval(payload)
        .then((res) => {
          if (res.code === 200) {
            ElMessage.success("提交成功");
          } else {
            ElMessage.error(res.info);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>
<style lang="scss" scoped>
.service-evaluation {
  width: 100%;
  height: 100%;
  padding: 20% 15% 0 15%;
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  .tip {
    font-size: 1.1rem;
    line-height: 1.5rem;
  }
  .submit-button {
    width: 100%;
    border-radius: 2rem;
    height: 3rem;
    font-size: 1rem;
  }
  :deep(.el-form-item) {
    margin-bottom: 4rem;
    flex-direction: column;
    .el-form-item__label {
      justify-content: flex-start;
    }
  }
  :deep(.el-radio) {
    margin: 0;
  }
  :deep(.el-form-item__label),
  :deep(.el-input),
  :deep(.el-radio__label) {
    font-size: 1rem;
  }
  :deep(.el-radio-group) {
    display: flex;
    flex-direction: column;
  }
  :deep(.el-radio-group) {
    align-items: initial;
    width: 100%;
  }
}
</style>
